import "./VehicleInformationAdd.scss";

import {
  Form,
  Input,
  Button,
  Select,
  Image,
  Modal,
  Upload,
  DatePicker,
} from "antd";
import {
  ExclamationCircleOutlined,
  LoadingOutlined,
  PlusOutlined,
} from "@ant-design/icons";
import { useEffect, useState } from "react";
import http from "../../utils/http";

const { Option } = Select;
const { confirm } = Modal;
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
const VehicleInformationAdd = ({ setState }) => {
  //获取车主信息

  // useEffect(()=>{
  // console.log(111111)
  //   http({
  //     url: '/car/findCarOwner',
  //     method:'post'
  // })
  // },cartype,owner)
  //返回页面
  const backCar = () => {
    setState(1);
  };
  const quxiao = () => {
    confirm({
      icon: <ExclamationCircleOutlined />,
      content: "您确定离开此页面吗？",
      cancelText: "取消",
      okText: "确定",
      onOk() {
        console.log("OK");
        backCar();
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };
  const time = (time) => {
    let createtime;
    if (time) {
      let date = new Date(time);
      let y = date.getFullYear(); //获取年份
      let m = date.getMonth() + 1; //获取月份
      m = m < 10 ? "0" + m : m; //月份不满10天显示前加0
      let d = date.getDate(); //获取日期
      d = d < 10 ? "0" + d : d; //日期不满10天显示前加0
      createtime = y + "-" + m + "-" + d;
    }
    return createtime;
  };
  var ownerType;
  var ownerName;
  // const [ownerData,setownerData]=useState([])
  const [ownerId, setownerId] = useState(0);
  const [type, settype] = useState("");
  const [form] = Form.useForm();
  const [ownerForm] = Form.useForm();
  const onFinish = (values) => {
    let newCar = values;
    newCar.ownerId = ownerId;
    newCar.ownerType = type;
    newCar.cinfStart = time(values.cinfStart);
    newCar.cinfEnd = time(values.cinfEnd);
    console.log(newCar);
    http({
      url: "/car/addCarInformation",
      method: "post",
      params: newCar,
    }).then((res) => {
      console.log(res);
      if (res.code == 200) {
        form.resetFields();
      }
    });
  };

  function handleChange(value) {
    // console.log(`selected ${value}`);
    ownerType = value;
    ownerName = ownerForm.getFieldsValue(true).ownerName;
    // console.log(ownerType)
    // console.log(ownerName)
    if (ownerType && ownerName) {
      http({
        url: "/car/findCarOwner",
        method: "post",
        params: { ownerName, ownerType },
      }).then((res) => {
        console.log(res.data);
        // setownerData(res.data)
        setownerId(res.data.ownerId);
        settype(ownerType);
        ownerForm.setFieldsValue(res.data);
      });
    }
    // settypeInp(value)
  }
  return (
    <div className="xinzengcar">
      <div>
        <div className="tit">
          <div>
            <div>
              <div></div>
              <div>车辆信息新增</div>
            </div>
          </div>
          <div>
            <span className="iconfont icon-a-16guanbi" onClick={quxiao}></span>
          </div>
        </div>
        <hr></hr>
        <div className="content">
          <div>
            <p>车主基本信息:</p>
            <Form
              {...layout}
              form={ownerForm}
              name="control-hooks"
              onFinish={onFinish}
              // initialValues={ownerData}
            >
              <Form.Item
                name="ownerName"
                label="车主姓名"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                name="ownerType"
                label="车主类别"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Select
                  placeholder="请选择"
                  allowClear
                  style={{ width: "100%" }}
                  onChange={handleChange}
                >
                  <Option value="person">租户</Option>
                  <Option value="visitors">访客</Option>
                </Select>
              </Form.Item>
              <Form.Item
                name="ownerPhone"
                label="联系方式"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Input disabled />
              </Form.Item>
              <Form.Item
                name="ownerSex"
                label="人员性别"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Select allowClear disabled></Select>
              </Form.Item>
              <Form.Item
                name="unitName"
                label="单位名称"
                // rules={[
                //   {
                //     required: true,
                //   },
                // ]}
              >
                <Input disabled />
              </Form.Item>
              <Form.Item
                name="tenSerialint"
                label="所属楼宇"
                // rules={[
                //   {
                //     required: true,
                //   },
                // ]}
              >
                <Select placeholder="" allowClear disabled></Select>
              </Form.Item>
              <Form.Item
                name="roomNo"
                label="房间名称"
                // rules={[
                //   {
                //     required: true,
                //   },
                // ]}
              >
                <Input disabled />
              </Form.Item>
              <Form.Item
                name="face"
                label="人脸照片"
                // rules={[
                //   {
                //     required: true,
                //   },
                // ]}
              >
                <Image
                  width={100}
                  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                />
              </Form.Item>
              {/* <Form.Item >
                                <Button type="primary" htmlType="submit">
                                    Submit
                                </Button>
                            </Form.Item> */}
            </Form>
          </div>
          <div>
            <p>车辆基本信息:</p>
            <div className="basic">
              <div>
                <Form
                  {...layout}
                  form={form}
                  name="control-hooks"
                  onFinish={onFinish}
                >
                  <Form.Item
                    name="cinfClass"
                    label="车辆类型"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Select
                      // placeholder=""
                      allowClear
                    >
                      <Option value="0">临时车</Option>
                      <Option value="1">包月车</Option>
                      <Option value="2">园区车</Option>
                    </Select>
                  </Form.Item>
                  <Form.Item
                    name="cinfBrand"
                    label="车辆品牌"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    name="cinfStart"
                    label="开始时间"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <DatePicker style={{ width: "100%" }} />
                  </Form.Item>
                  {/* <Form.Item >
                                <Button type="primary" htmlType="submit">
                                    Submit
                                </Button>
                            </Form.Item> */}
                </Form>
              </div>
              <div>
                <Form
                  {...layout}
                  form={form}
                  name="control-hooks"
                  onFinish={onFinish}
                >
                  <Form.Item
                    name="cinfMark"
                    label="车辆号码"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Input></Input>
                  </Form.Item>
                  <Form.Item
                    name="cinfType"
                    label="车辆型号"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    name="cinfEnd"
                    label="结束时间"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <DatePicker style={{ width: "100%" }} />
                  </Form.Item>
                  <Form.Item {...tailLayout}>
                    <div className="btn">
                      <Button type="primary" htmlType="submit">
                        保存
                      </Button>
                      <Button onClick={quxiao}>取消</Button>
                    </div>
                  </Form.Item>
                </Form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default VehicleInformationAdd;
